import React from 'react';
import { Table, Tag, Space } from 'antd';
import axios from 'axios';

// appName: "detail"
// connection: "277746"
// dockateId: 1
// http_user_agent: "lua-resty-http/0.13 (Lua) ngx_lua/10014"
// id: 12880
// isSuccess: false
// referer: "-"
// remote_addr: "127.0.0.1"
// remote_user: "-"
// request_method: "GET"
// request_time: 0
// request_uri: "/detail"
// server_name: ""
// status: 200
// time: 1653396949000
// upsteam_addr: "-"
// upstream_response_time: "-"

const columns = [
  {
    title: '源IP',
    dataIndex: 'remote_addr',
    key: 'remote_addr'
  },
  {
    title: '请求方法',
    dataIndex: 'request_method',
    key: 'request_method'
  },
  {
    title: '状态码',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '应用名称',
    key: 'appName',
    dataIndex: 'appName'
  },
  {
    title: '时间',
    key: 'time',
    dataIndex: 'time',
    render: (val) => {
      const timeSting = new Date(val).toLocaleString();
      return (
        <div
          title={timeSting}
          style={{
            width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
          }}
        >
          {timeSting}
        </div>
      );
    }
  },
  {
    title: '请求路径',
    key: 'request_uri',
    dataIndex: 'request_uri'
  },
  {
    title: '响应时间',
    key: 'upstream_response_time',
    dataIndex: 'upstream_response_time'
  }
];

const getTitle = () => <div className="tableTitle">最新流量</div>;

class NewFlow extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  render() {
    const { data } = this.props;
    return (
      <div className="newFlow">
        <Table
          rowKey={(row) => row.id}
          size="small"
          style={{ height: '100%', width: '100%' }}
          title={getTitle}
          pagination={{ pageSize: 100 }}
          columns={columns}
          dataSource={data}
          scroll={{ y: '160px' }}
        />
      </div>
    );
  }
}

export default NewFlow;
